<template>
  <div class="app-container order-manger">
    <el-tabs
      class="order-manger-tab"
      v-model="activeName"
      type="border-card"
    >
      <el-tab-pane label="云享订单" name="1">
        <el-scrollbar class="scroll-content">
          <clinicCharges v-if="activeName === '1'" />
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane label="本地订单" name="2">
        <el-scrollbar class="scroll-content">
          <localOrder v-if="activeName === '2'" />
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import clinicCharges from "@/views/charges/clinicCharges";
import localOrder from "../local";

export default {
  name: "outOrder",
  components: { 
    clinicCharges,
    localOrder
  },
  data() {
    return {
      activeName: "1"
    }
  },
  mounted() {
    let currentRoute = this.$router.currentRoute;
    let tab = currentRoute.query.tab;
    if(tab) {
      this.activeName = tab;
    }
  }
}
</script>

<style lang="scss">
.order-manger {
  padding: 10px;

  .order-manger-tab {
    height: calc(100vh - 104px);

    .el-tabs__header {
      padding: 0;
      margin: 0;
    }

    .el-tabs__content {
      height: calc(100% - 40px);
      padding: 0;
    }

    .scroll-content,
    .el-tab-pane {
      height: 100%;
    }

    .el-tab-pane {
      padding: 10px;
    }

    .scroll-content {
      .el-scrollbar__wrap {
        overflow-x: hidden;
      }
      .is-vertical {
        right: -8px;
      }
    }
  }
}
</style>